<template>
	<view class="input-search-content" @click="linkSearch">
		<icon class="icon-search"></icon>
		<input type="text" v-model="searchValue" placeholder="搜索疾病、症状关键词" placeholder-style="color: #C6C6C6" @input="bindInput" :disabled="disabled" />
		<button class="btn-search" @click="bindSearch">搜索</button>
	</view>
</template>

<script>
export default {
	props: {
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			searchValue: ''
		};
	},
	methods: {
		// 点击跳转到搜索页
		linkSearch() {
			if (this.disabled) {
				uni.navigateTo({
					url: `/pagesHome/search/search`
				});
			}
		},
		// 搜索按钮
		bindSearch() {
			if (!this.disabled) {
				if (!this.searchValue) {
					uni.showToast({
						title: '请输入关键字',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				this.$emit('search', this.searchValue);
			}
		},
		// 输入监听
		bindInput(event) {
			this.$emit('onInput', event.detail.value);
		}
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
.input-search-content {
	width: 100%;
	height: 84rpx;
	background: #fefefe;
	border-radius: 42rpx;
	border: 2rpx solid #f2f2f2;
	display: flex;
	align-items: center;
	padding-left: 28rpx;
	box-sizing: border-box;
	.icon-search {
		width: 36rpx;
		height: 36rpx;
		background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-search.png) no-repeat;
		background-size: cover;
		margin-right: 20rpx;
	}
	& > input {
		flex: 1;
		height: 100%;
		font-size: 32rpx;
	}
	.btn-search {
		width: 110rpx;
		height: 100%;
		font-size: 32rpx;
		color: #34d1a9;
		background: transparent;
		position: relative;
		&::after {
			content: '';
			width: 2rpx;
			height: 44rpx;
			background: #e1e1e1;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
		}
	}
}
</style>
